import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { View,ListView, Text, StyleSheet,TouchableOpacity, Image} from 'react-native'
import { List, InputItem, Flex, Popup, Icon } from 'antd-mobile'
import { RefreshListView, RefreshState } from '../../widget'
import HTTP from '../../libs/HTTP'
import { productSpecsUrl } from '../../libs/api'
import screen from '../../libs/screen'
import { getOrganNo } from '../../libs/Libs'

const closeImg = require('../../img/Normal/close.png')
const Item = List.Item

export default class extends React.Component {
  static propTypes = {
    producerOrganNo: PropTypes.any,
    onClose: PropTypes.func,
    invokeFill: PropTypes.func,
  }
  constructor(props) {
    super(props)
    let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
    this.state = {
      onClose: PropTypes.func,
      currentPage: 0, //当前页
      dataSource: ds.cloneWithRows([]),　//数据源
      innerData: [], //内部数据
      seaParams: {}
    };
  }

  onSel = (sel) => {
    this.setState({ sel });
    this.props.onClose();
  };

  componentDidMount() {
    this.requestData()
  }

  seaRequestD(v) {
    this.setState({
      currentPage: 0,
      innerData: [],
      seaParams: {specsName: v}
    }, () => {
      this.requestData()
    })
  }

  requestData(v = {}) {
    HTTP.post(productSpecsUrl(), Object.assign({}, {
      page: this.state.currentPage,
      organNo: this.props.producerOrganNo
    }, this.state.seaParams), () => {}, (resp) => {
      if(resp.data){
        this.setState(preState => {
          const newD = preState.innerData.concat(resp['data'])
          return {
            innerData: newD,
            dataSource: preState.dataSource.cloneWithRows(newD),
            currentPage: preState.currentPage + 1
          }
        }, () => {
          if(resp.data.length == 0) {
            this.listView.endRefreshing(RefreshState.NoMoreData)
          } else {
            this.listView.endRefreshing(RefreshState.Idle)
          }
        })
      }
    })
  }

  listView:  RefreshListView

  render() {
    const { onClose } = this.props;
    return (
      <RefreshListView
        ref={(e) => this.listView = e}
        dataSource={this.state.dataSource}
        renderHeader={() =>
          <List
            renderHeader={() => {
              return (
                <View style={{alignItems: 'flex-end', padding: 5}}>
                  <TouchableOpacity onPress={() => {
                    onClose()
                  }}>
                    <Image source={closeImg} style={{width: 24, height: 24}}/>
                  </TouchableOpacity>
                </View>
              )
            }}
          >
            <InputItem onChange={val => {
              this.seaRequestD(val)
            }}>搜索内容</InputItem>

          </List>
        }
        renderRow={(rowData) => {
          return (
            this.renderCell(rowData)
          )
        }}
        onHeaderRefresh={() => this.requestData()}
        onFooterRefresh={() => this.requestData()}
      />
    )
  }

  renderCell(record) {
    const specsName = record['specsName']
    return (
      <Item>
        <TouchableOpacity onPress={() => {
          this.fillWith(record)
        }}>
          <View>
            <Text>{specsName}</Text>
          </View>
        </TouchableOpacity>
      </Item>
    )
  }
  fillWith = (record) => {
    this.props.invokeFill(record)
    this.props.onClose()
  }
}
